import React from 'react'
import { Form, Input, Button, Card,message } from 'antd'
import * as constant from '@/utils/constant'
import {IUser} from '@/types/users'
import api from '@/api'
import {useNavigate} from 'react-router-dom'
export default function Login() {
  const nav=useNavigate()
  const loginApi = async(arg:IUser) => {
    const result=await api.users.login(arg)
    console.log('result',result.data);
    if(result.data.code){
      message.success(result.data.message)
      localStorage.setItem('token',result.data.token)
      nav('/')
    } 
  }
  return (
    <div>
      <Card style={{width:'500px',margin:'100px auto'}}>
        <Form onFinish={loginApi}>
          <Form.Item label="账号" name="username" rules={[
            {
              required: true,
              message: constant.USERNAMENOTNULL
            }
          ]}>
            <Input placeholder='请输入用户名'></Input>
          </Form.Item>
          <Form.Item label="密码" name="password" rules={[
            {
              required: true,
              message: constant.PASSWORDNOTNULL
            }
          ]}>
            <Input.Password placeholder='请输入密码'></Input.Password>
          </Form.Item>
          <Form.Item>
            <Button htmlType='submit' type='primary'>登录</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
